<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>申请企业会员</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <!--weui-->
    <link rel="stylesheet" href="../addons/orange_member/style/weui/weui.css">
    <link rel="stylesheet" href="../addons/orange_member/style/jqvalidate/validate.css">
    <style>
        .company-list {
            overflow-y: scroll;
            min-height: 100px;
            position: relative;
            border: 1px solid #ddd;
            border-top: 0;
            padding-bottom: 40px;


        }

        #company {
            display: none;
        }

        .company-list li {
            display: none;
            padding: 10px;
            border-bottom: 1px solid #e8e8e8;
        }

        .company-list li:hover {
            background: #e0e0e0;
        }
        .cmxrow{
            width: 98%;
            margin: 10px auto;
        }
        #company-input{
            border-radius: 0;
        }

        /* 页面修改样式 */
        .bodyBg{
            background-color: #fbfbfb;
        }
        .contantBlock{
            background-color: #fff;
            padding: 0 15px 40px;
            margin-top: 15px;
            border-radius: 4px;
        }
        .memberText{
            display:inline-block;
            padding-left: 0;
            padding-right: 0;
        }
        .form-horizontal .form-group{
            margin: 0;
        }
        .form-group{
            border-bottom: solid 1px #f5f5f5;
        }
        .memberName-label{
            padding: 0;
        }
        .form-control[readonly]{
            width: 260px;
            border:none;
            background-color:transparent;
            box-shadow: none;
        }
        .selectBlock{
            display:inline-block;
        }
        .memberRadio-label{
            padding: 0;
        }
        .form-horizontal .radio-inline{
            padding-top: 0;
        }
        .formRow{
            padding-top: 15px;
            padding-bottom: 5px;
        }
        .formBtn{
            margin-top: 30px;
            border:none;
            background-color: #d70010;
            box-shadow: none;
            color: #fff;
        }

    </style>
</head>
<body class="bodyBg">


<div class="container">
    <div class="contantBlock">
        <form class="form-horizontal cmxform" id="commentForm" method="get" action="">

            <input type="hidden" name="i" value="{$_W['uniacid']}">
            <input type="hidden" name="c" value="entry">
            <input type="hidden" name="do" value="ApplyCompanyMember">
            <input type="hidden" name="m" value="orange_member">

            <div class="form-group formRow">
                <label for="member_name" class="col-sm-2 control-label memberName-label">姓名：</label>
                <div class="col-sm-10 memberText">
                    <input type="text" id='member_name' name="member_name" readonly value="{$memberInfo['realname']}"
                           class="form-control">
                </div>
            </div>
            <div class="form-group formRow">
                <label for="member_mobile" class="col-sm-2 control-label memberName-label">手机号码：</label>
                <div class="col-sm-10 memberText">
                    <input type="text" name="member_mobile" id="member_mobile" readonly value="{$memberInfo['mobile']}"
                           required class="form-control">
                </div>
            </div>

            <div class="form-group formRow">
                <label class="col-sm-2 control-label memberRadio-label">公司类型：</label>
                <div class="col-sm-10 selectBlock">
                    <label class="radio-inline">
                        <input type="radio" name="company_attr" id="inlineRadio1" value="写字间"> 写字间
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="company_attr" id="inlineRadio2" value="街区"> 街区
                    </label>
                </div>
            </div>
            <div class="form-group" id="company">
                <label for="company-input" class="col-sm-2 control-label">公司名称：</label>
                <div class="col-sm-10">
                    <input id="company-input" type="text" name="member_company" class="form-control">

                    <ul class="company-list" style="display: none">
                    </ul>
                </div>
            </div>
            <input type="hidden" name="token" value="{$_W['token']}">
            <input class="form-control formBtn" type="submit" name="submit" value="确 定">
        </form>
    </div>
</div>

<!--jquery-->
<script src="../addons/orange_member/style/js/jquery-2.1.4.min.js"></script>

<script src="../addons/orange_member/style/jqvalidate/jquery.validate.min.js"></script>
<script src="../addons/orange_member/style/jqvalidate/jquery.js"></script>
<script src="../addons/orange_member/style/jqvalidate/message_zh.js"></script>

<script>
    $.validator.setDefaults({
        submitHandler: function () {
            form.submit();
        }
    });
    $().ready(function () {
        $("#commentForm").validate(
            {
                rules: {
                    member_name: "required",
                    member_mobile: {
                        required: true,
                        digits: true,
                        minlength: 11,
                        maxlength: 14
                    },
                    company_attr: "required",
                    member_company: "required",
                },
                messages: {
                    member_name: "请正确输入您的姓名",
                    member_mobile: {
                        required: "请输入手机号",
                        digits: "手机号格式不正确",
                        minlength: "手机号格式不正确",
                        maxlength: "手机号格式不正确"
                    },
                    company_attr: "请选择公司类型",
                    member_company: "请输入公司名称"
                }
            })
    });


</script>


<script>


    $(function () {
        $("input[name=company_attr]").click(function () {
            if ($(this).val() == '街区') {

                $.post("{php echo $this->createMobileurl('ApiGetBlockList')}",
                    {},
                    function (data) {
                        if (data.errCode == 0) {
                            var html = '';
                            $(data.data).each(function (i, n) {
                                html += "<li class='company'>" + this.storename + "</li>";
                            })
                            $('#company').show();
                            $(".company-list").html(html);
                            InputValue();
                        } else {
                            alert('还没有街区公司信息');
                        }
                    }, "JSON");
            }
            if ($(this).val() == '写字间') {
                $.post("{php echo $this->createMobileurl('ApiGetTranscriptList')}",
                    {},
                    function (data) {
                        if (data.errCode == 0) {
                            var html = '';
                            $(data.data).each(function (i, n) {
                                html += "<li class='company'>" + this.storename + "</li>";
                            })
                            $('#company').show();
                            $(".company-list").html(html);
                            InputValue();
                        } else {
                            alert('还没有写字间公司信息');
                        }
                    }, "JSON");
            }
        });
    });


    $('#company-input').bind('input propertychange', function () {
        $(".company-list li").hide();
        $(".company-list").hide();
        var _member_input = $(this).val();
        _lis = $('.company-list li');
        $(_lis).each(function (i, e) {
            if (this.innerHTML.indexOf(_member_input) >= 0 && _member_input != '') {
                $(this).show();
                $(".company-list").slideDown();
            }
        })
    });


    function InputValue() {
        $(".company").click(function () {
            var _search_company = this.innerHTML;
            $("#company-input").val(_search_company);
            $(".company-list").slideUp();
        })
    }


</script>
</body>
</html>

